<template>
  <div class="style">

      <h3>欢迎来到收房合同续约</h3>
      <template >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="合同信息" name="first">
            <el-form :inline="true" :model="contractForm" class="demo-form-inline">
              <h3>房产信息</h3>
              <el-button type="warning" plain @click="findContract">收房合同查询</el-button><hr>

                  <el-form-item label="*小区名称">
                    <el-input v-model="contractForm.houseName"></el-input>
                  </el-form-item>

                  <el-form-item label="*房产信息">
                    <el-input v-model="contractForm.premiseName"></el-input>
                  </el-form-item><br>


                  <el-form-item label="*所有权类型">
                    <el-select v-model="contractForm.houseType" placeholder="请选择所有权类型" style="width: 170px">
                      <el-option label="国有房产" value=1></el-option>
                      <el-option label="直管房产" value=2></el-option>
                      <el-option label="自管房产" value=3></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="*房产证编号">
                    <el-input v-model="contractForm.houseZsNo"></el-input>
                  </el-form-item><br>


                  <el-form-item label="*产权地址">
                    <el-input v-model="contractForm.cqAddress"></el-input>
                  </el-form-item>

              <h3>业主信息</h3><hr>

                  <el-form-item label="*业主姓名">
                    <el-input v-model="contractForm.ownerName" style="width: 100px"></el-input>
                  </el-form-item>
                  <el-form-item >
                    <el-radio v-model="contractForm.signWithOwner" label="0">是签约人</el-radio>
                    <el-radio v-model="contractForm.signWithOwner" label="1">不是签约人</el-radio>
                  </el-form-item>

                  <el-form-item>
                    <el-select v-model="zhnengjian" placeholder="证件类型" style="width: 120px">
                      <el-option label="身份证" value="身份证"></el-option>
                      <el-option label="港澳台通行证" value="港澳台通行证"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="*业主证件号码">
                    <el-input v-model="contractForm.ownerIdCard" placeholder="请添加业主证件号码" ></el-input>
                  </el-form-item><br>

                  <el-form-item label="*业主手机号">
                    <el-input v-model="contractForm.ownerMobile" placeholder="请添加业主手机号" ></el-input>
                  </el-form-item>

                  <el-form-item label="*业主联系地址">
                    <el-input v-model="contractForm.ownerContactAddress" placeholder="请添加业主联系地址"></el-input>
                  </el-form-item><br>


                  <el-form-item label="*签约人">
                    <el-input v-model="contractForm.signUserName" placeholder="请添加签约人姓名"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-select v-model="zhnengjian" placeholder="证件类型" style="width: 120px">
                      <el-option label="身份证" value="身份证"></el-option>
                      <el-option label="港澳台通行证" value="港澳台通行证"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="*签约人证件号码">
                    <el-input v-model="contractForm.signUserIdCard" placeholder="请添加签约人证件号码"></el-input>
                  </el-form-item><br>

                  <el-form-item label="*签约人手机号">
                    <el-input v-model="contractForm.signUserMobile" placeholder="请添加签约人手机号"></el-input>
                  </el-form-item>

                  <el-form-item label="*紧急联系电话">
                    <el-input v-model="contractForm.signUserEmergencyPhone" placeholder="请添加紧急联系电话"></el-input>
                  </el-form-item><br>



                  <el-form-item label="账户类型">
                    <el-select v-model="contractForm.zhanghu" placeholder="账户类型" @change="choosedetail">
                      <el-option label="对公账户" value="对公账户"></el-option>
                      <el-option label="对私账户" value="对私账户"></el-option>
                    </el-select>
                  </el-form-item>



                  <el-form-item label="*开户省份">
                    <el-input v-model="contractForm.accountName" placeholder="请添加开户省份"></el-input>
                  </el-form-item><br>

                  <el-form-item label="*银行名称">
                    <el-input v-model="contractForm.bankName" placeholder="请添加银行名称"></el-input>
                  </el-form-item>



                  <el-form-item label="*开户支行">
                    <el-input v-model="contractForm.bankOpen" placeholder="请添加开户支行"></el-input>
                  </el-form-item><br>

                  <el-form-item label="*银行行号">
                    <el-input v-model="contractForm.bankBranchCodeLh" placeholder="请添加银行行号" :disable="jinyong"></el-input>
                  </el-form-item>


                  <el-form-item label="*账户姓名">
                    <el-input v-model="contractForm.yname" placeholder="请添加账户姓名"></el-input>
                  </el-form-item><br>

                  <el-form-item label="*银行卡号">
                    <el-input v-model="contractForm.bankCardNumber" placeholder="请添加银行卡号"></el-input>
                  </el-form-item>

              <h3>租约信息(续约)</h3><hr>

                  *租约期限
                  <el-date-picker
                    v-model="contractForm.leaseStartTime"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期">
                  </el-date-picker>
                  至
                  <el-date-picker
                    v-model="contractForm.leaseEndTime"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期"
                    @change="changeTime">
                  </el-date-picker>

                  <el-button @click="oneyear">一年</el-button>
                  <el-button>二年</el-button>
                  <el-button>三年</el-button>
                  <el-button>四年</el-button>
                  <el-button>五年</el-button><br>

                  *租金:<el-input v-model="contractForm.monthRent" placeholder="请输入" style="width: 200px"></el-input>
                  *房产押金<el-input v-model="contractForm.depositMoney" placeholder="请输入" style="width: 200px"></el-input><br>

                  *支付方式
                  押 <el-input-number v-model="contractForm.depositType" @change="handleChange" :min="1" :max="10" ></el-input-number>
                  付<el-input-number v-model="contractForm.paymentType" @change="handleChange" :min="1" :max="10" ></el-input-number><br><br>

              <el-form-item>
                <el-button type="primary" @click="addCon">完成</el-button>
              </el-form-item>
            </el-form>

          </el-tab-pane>
        </el-tabs>
      </template>

      <!--    点击弹出房产信息-->
      <el-dialog title="合同信息" :visible.sync="controlHouseTable">
        <el-table :data="contractData">
          <el-table-column property="ownerName" label="业主姓名" width="150"></el-table-column>
          <el-table-column property="houseName" label="房产信息" width="200"></el-table-column>
          <el-table-column property="conSignTime" label="签约日期"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="chooseContract(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--加入页码-->
        <el-pagination
          background
          @current-change="gopage"
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
      </el-dialog>


  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      activeName:"first",
      contractForm:{

      },//合同表
      //房产信息开关
      controlHouseTable:false,
      contractData:[],//房产表格信息
      total:0,
      pageSize:15,
      pageNum:0,
      jinyong:false,
      num:0,
      zhnengjian:"",
    }
  },
  methods:{
    handleChange(value) {
      console.log(value);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //合同续约签订
    addCon(){
      this.axios.post("http://localhost:9321/shoufang/contractAdd",this.contractForm).then(res=>{
        if(res.data.code==200){
          alert("合同添续约成功");
          this.contractForm={};
          this.$router.go(0);
        }
      })
    },
    //查找房合同
    searchlist(){
      this.axios.get("http://localhost:9321/shoufang/hetonglist?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(res=>{
        this.contractData=res.data.list;
        this.total=res.data.total;
      })
    },
    //选中的合同
    chooseContract(row){
      console.log(row);
      //给表单赋值
      this.contractForm.houseName=row.houseName;
      this.controlHouseTable=false;
    },
    //表格的分页
    gopage(page){
      this.pageNum=page;
      this.searchlist();
    },
    //账户类型的选择
    choosedetail(row){
      alert(row);
      if("si"==row){
        //禁用
        this.jinyong=true;
      }
    },
    //租约日期
    changeTime(){
      //判断
      if(new Date(this.contractForm.date1).getTime()>= new Date(this.contractForm.date2).getTime()){
        this.$message.error("请选择正确的日期");
        //把日期清除
        this.contractForm.date1="";
        this.contractForm.date2="";
      }
    },
    //租约信息选择一年
    oneyear(){
      if(this.contractForm.date1!=null){
        //已输入时间 从输入时间计算1年
        alert("起租时间:"+this.contractForm.date1);
      }else{
        //获取到现在日期的年月日
        const nowDate=new Date();
        const nowTime=nowDate.getFullYear()+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate();
        this.contractForm.date1=nowTime;
        alert("起租时间:"+this.contractForm.date1);
        //赋值date2
        this.contractForm.date2=(nowDate.getFullYear()+1)+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate()
        alert("结束时间:"+this.contractForm.date2);
      }
    },
    //选中房产
    chooseHouse(row){
      console.log(row);
      this.contractForm.premiseName=row.premiseName;
      this.contractForm.houseName=row.houseName;
      this.controlHouseTable=false;
    },
    findContract(){
      this.controlHouseTable=true;
      this.searchlist();
    }

  },
  created() {
    this.searchlist();
  }
}
</script>

<style scoped>
.style{
  margin-left: 100px;
}
</style>
